@import "../basic/mixins.config";

.image {
  position: relative;
  overflow: hidden;

  &-container {
    height: 0;
    padding-bottom: 100%;
  }

  &-body {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  img, image {
    width: 100%;
    height: 100%;
  }

  &.default {
    width: $image-size-default;
    height: $image-size-default;
  }

  &.xs {
    width: $image-size-xs;
    height: $image-size-xs;
  }

  &.sm {
    width: $image-size-sm;
    height: $image-size-sm;
  }

  &.md {
    width: $image-size-md;
    height: $image-size-md;
  }

  &.lg {
    width: $image-size-lg;
    height: $image-size-lg;
  }

  &-placeholder {
    background-color: $image-placeholder-bg;
    color: $grey;
    font-size: 30%;
  }

  &.round {
    border-radius: $border-radius;

    &-circle {
      border-radius: 100%;
    }
  }
}
